<template>
	<view>
		<view class="VideoXuanji-box">
			<view class="VideoXuanji">
				<view class="Top">
					<view class="Header">
						<view class="left">
							<text class="Tit-text">{{title}}</text>
						</view>
						<view class="right" @click="open">
							<text class="jishu-count-text">展开</text>
							<!-- 查看更多 -->
							<!-- #ifndef APP-NVUE -->
							<u-icon name="qianjin" custom-prefix="custom-icon" size="24" color="#ababab"></u-icon>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<view class="icons">
								<text class="open nvueiconfont" style="color:#ababab;">&#xe643;</text>
							</view>
							<!-- #endif -->
						</view>
					</view>
				</view>
				<view class="Bottom h5 zy">
					<!-- 选集列表 -->
					<view class="xuanji scoll-x">
						<scroll-view class="scroll-view" :scroll-x="true" 
						:scroll-with-animation="true"
						:show-scrollbar="false"
						:scroll-into-view="scrollviewitem"
						@scroll="scroll"
						>
							<view class="scollView">
								<!-- 如果item大于或等4，则开始批量设置距离 -->
								<view class="xuanji-item"
								:class="curlPlayFromIndex==index ?'current':'no'"
								v-for="(item,index) in PlayFromlist"
								:key="index"
								:data-index="index"
								:data-scrollleft="Number(index*48.166)+Number(345/5)"
								:id="'item'+index"
								@click="xuanyuanTap"
								>	
									<text class="jishu-text">{{item.name}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- popup弹窗 -->
		<button v-if="false" @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom">
		    <view class="popup-box">
		    	<view class="popup">
		    		<!-- 选集列表 -->
		    		<view class="popup-xuanji"
					>
						<scroll-view class="popup-scroll-view" :scroll-y="true" :show-scrollbar="false">
							<view class="popup-scollView">
								<!-- 如果item大于或等4，则开始批量设置距离 -->
								<view class="popup-xuanji-item"
								:class="curlPlayFromIndex==index ?'popup-current':'no'"
								v-for="(item,index) in PlayFromlist" 
								:key="index"
								:data-index="index"
								:data-scrollleft="Number(index*48.166)+Number(345/5)"
								:id="'item'+index"
								@click="xuanyuanTap"
								>
									<text class="popup-jishu-text"
									>{{item.name}}</text>
								</view>
							</view>
						</scroll-view>
		    		</view>
					<view class="tit-box">
						<text class="tit-text">如果视频不能播放，请更换播放源</text>
					</view>
		    	</view>
		    </view>
		    <button v-if="false" @click="close">关闭</button>
		</uni-popup>
	</view>
</template>

<script>
	//导入公用的非传参等事件，如打开弹窗、关闭弹窗等....
	import componentsFunction from '../mixins/components.js'
	export default {
		name:"VideoXuanji",
		mixins:[componentsFunction],
		props:{
			//导航名称 Header-left[title]
			title:{
				type:String,
				default:'选集'
			},
			//当前集数坐标
			curlPlayFromIndex:{
				type:Number,
				default:0
			},
			//每一集的播放链接
			PlayFromlist:{
				type:Array,
				default:[]
			},
			//值应为某子元素id（id不能以数字开头）。
			//设置哪个方向可滚动，则在哪个方向滚动到该元素
			//@scroll-view属性：scroll-into-view
			scrollviewitem:{
				type:String,
				default:'item0'//默认0
			},
			//设置scroll需要滚动的距离
			//暂时不用这个，距离总有误差！
			scrollleft:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				//测试
				CurIndex:0,
				
				//
				toView:this.scrollviewitem
			};
		},
		methods:{
			// 选源事件
			xuanyuanTap(e){
				console.log(e.currentTarget.dataset.index)
				let index = e.currentTarget.dataset.index
				//let scrollleft = e.currentTarget.dataset.scrollleft
				
				
				
				//****已废弃，有时候不准确，太渣！
				//测试时拿到的scroll数据 
				/* detail:
				 * deltaX: -39.5
				 * deltaY: 0
				 * scrollHeight: 50
				 * scrollLeft: 1445  (偏移距离,全集30,当前距离是30集给的)
				 * scrollTop: 0
				 * scrollWidth: 1790 (总距离)
				 * 由此可以算出1790-1445 = 345
				 * 然后345*2=690，正好是我设置的690rpx
				 * 那么就可以得出1445/30(共30集) = 48.166...
				 * ****切换集数时,就判断并设置距离****
				 */
				
				//一个集数item的scrollLeft是48.166(算出来的)
				//设置偏移距离
				
				//let scrollWidth = Number(this.videojishuURL.length*48.166)
				//console.log("总宽度")
				//console.log(scrollWidth)
				
				//let scrollleftWidth = Number(index*48.166)+Number(345/2)
				
				//定义scoll-view参数
				let options = {
					index,
					ScViewitem:'item'+index,
					//scrollleft:scrollleft
					
				}
				this.$emit('change',options)
				//this.toView = options.ScViewitem
			},
			scroll: function(e) {
				//console.log(e)
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	@import './VideoXuanYuan.scss';
</style>
